<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <form>
      <label>
        Name:
        <input type="text" name="name" />
      </label>
      <input type="submit" value="Submit" />
    </form>
    <textarea id="rr" name="name" rows="8" cols="40"></textarea>
    <div id="root"></div>
    <script src="../../js/react.js" charset="utf-8"></script>
    <script src="../../js/react-dom.js" charset="utf-8"></script>
    <script src="../../js/browser.min.js" charset="utf-8"></script>

    <script type="text/babel">

        /*function LoginButton(props) {
          return (
            <button onClick={props.onClick}>
              Login
            </button>
          );
        }

        function LogoutButton(props) {
          return (
            <button onClick={props.onClick}>
              Logout
            </button>
          );
        }

        function UserGreeting(props) {
          return <h1>Welcome back!</h1>;
        }

        function GuestGreeting(props) {
          return <h1>Please sign up.</h1>;
        }

        function Greeting(props) {
          const isLoggedIn = props.isLoggedIn;
          if (isLoggedIn) {
            return <UserGreeting />;
          }
          return <GuestGreeting />;
        }

        class LoginControl extends React.Component {
            constructor(props) {
                super(props)
                this.handleLoginClick = this.handleLoginClick.bind(this)
                this.handleLogoutClick = this.handleLogoutClick.bind(this)
                this.state = {isLoggedIn: false}
            }

            handleLoginClick() {
                this.setState({isLoggedIn: true})
            }

            handleLogoutClick() {
                this.setState({isLoggedIn: false})
            }

            render() {
                const isLoggedIn = this.state.isLoggedIn;
                let button = null;
                if (isLoggedIn) {
                  button = <LogoutButton onClick={this.handleLogoutClick} />;
                } else {
                  button = <LoginButton onClick={this.handleLoginClick} />;
                }

                return (
                  <div>
                    <Greeting isLoggedIn={isLoggedIn} />
                    {button}
                  </div>
              );
            }
        }

        ReactDOM.render(
          <LoginControl />,
          document.getElementById('root')
        );*/


        /*function Mailbox(props) {
          const unreadMessages = props.unreadMessages;
          return (
            <div>
              <h1>Hello!</h1>
              {unreadMessages.length > 0 &&
                <h2>
                  You have {unreadMessages.length} unread messages.
                </h2>
              }
            </div>
          );
        }

        const messages = ['React', 'Re: React', 'Re:Re: React'];
        // const messages = [];
        ReactDOM.render(
          <Mailbox unreadMessages={messages} />,
          document.getElementById('root')
        );*/


        function WarningBanner(props) {
          if (!props.warn) {
            return null;
          }

          return (
            <div className="warning">
              Warning!
            </div>
          );
        }

        class Page extends React.Component {
          constructor(props) {
            super(props);
            this.state = {showWarning: true}
            this.handleToggleClick = this.handleToggleClick.bind(this);
          }

          handleToggleClick() {
            this.setState(prevState => ({
              showWarning: !prevState.showWarning
            }));
          }

          render() {
            return (
              <div>
                <WarningBanner warn={this.state.showWarning} />
                <button onClick={this.handleToggleClick}>
                  {this.state.showWarning ? 'Hide' : 'Show'}
                </button>
              </div>
            );
          }
        }

        ReactDOM.render(
          <Page />,
          document.getElementById('root')
        );
    </script>
</body>
</html>
